<script setup name="Wxdjfgl">
import businessService from "@/api/business/index.js";
import zlAgencyService from "@/api/finance/zlAgency.js";
import { Edit } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import Message from 'vue-m-message'
import gfRecordService from '@/api/gfRecord/index.js'
import Toolbar from '@/components/Toolbar/Toolbar.vue'
import { useDict } from '@/utils/dict.js'
import { tableCheckChane } from '@/utils/index.js'

const { proxy } = getCurrentInstance()
const pagerConfig = ref({
  total: 0,
  currentPage: 1,
  pageSize: 10,
})
const ids = ref([])
const tableData = ref([])
const { sys_patent_type, jf_node, jfd_status,gf_record_status } = useDict('sys_patent_type', 'jf_node', 'jfd_status','gf_record_status')
const customerList = ref([])
const tableColumn = reactive([
  {
    type: 'checkbox',
    width: 50,
    align: 'center',
  },
  {
    title: '客户名称',
    field: 'customerName',
    align: 'center',
  },
  {
    title: '合同编号',
    field: 'contractNumber',
    align: 'center',
  },
  {
    title: '案件编号',
    field: 'patentNumber',
    align: 'center',
  },
  {
    title: '案件名称',
    field: 'patentName',
    align: 'center',
  },
  // {
  //   title: '业务类型',
  //   field: 'type',
  //   slotName: 'patentType'
  // },
  {
    title: '业务类型',
    field: 'businessName',
    align: 'center',
  },
  {
    title: '缴费节点',
    field: 'jfNode',
    align: 'center',
    slots: {
      default: 'jfNode',
    },
  },
  {
    title: '待缴费用',
    field: 'djMoney',
    align: 'center',
  },
  {
    title: '状态',
    field: 'status',
    align: 'center',
    slots: {
      default: 'status',
    },
  },
  {
    title: '备注',
    field: 'remark',
    align: 'center',
  },
  {
    title: '操作',
    field: 'actions',
    align: 'center',
    slots: {
      default: 'actions',
    },
  },
])
const businessList = ref([])
const searchConfig = reactive([
  {
    label: '合同编号',
    type: 'input',
    field: 'contractNumber',
    defaultShow: true,
  },
  {
    type: 'select',
    field: 'customerId',
    defaultShow: true,
    options: {
      data: customerList,
      label: 'customerName',
      value: 'customerId',
      key: 'customerId',
    },
    label: '客户名称',
  },
  {
    label: '案件编号',
    type: 'input',
    field: 'patentNumber',
    defaultShow: true,

  },
  {

    label: '案件名称',
    type: 'input',
    field: 'patentName',
    defaultShow: true,
  },
  {
    label: '业务类型',
    type: 'select',
    options: {
      data: businessList,
      label: 'businessName',
      value: 'businessId',
    },
    field: 'patentType',
  },
  {
    label: '缴费节点',
    type: 'select',
    options: {
      data: jf_node,
    },
    field: 'jfNode',
  },
  {
    label: '备注',
    type: 'input',
    field: 'remark',
  },
])
const queryParam = ref({})

onMounted(() => {
  getList()
})

function getList() {
  const params = {
    ...queryParam.value,
    pageNum: pagerConfig.value.currentPage,
    pageSize: pagerConfig.value.pageSize,
    status: 5,
    confirmStatus:1
  }
  gfRecordService.list(params).then((res) => {
    tableData.value = res.rows
    pagerConfig.value.total = res.total
  })
  zlAgencyService.optionList().then((res) => {
    customerList.value = res.data
  })
  businessService.list().then((res) => {
    businessList.value = res.rows
  })
}

function handlePageChange({ currentPage, pageSize }) {
  pagerConfig.value.currentPage = currentPage
  pagerConfig.value.pageSize = pageSize
  getList()
}

function handleCheckChange(data) {
  ids.value = tableCheckChane(data, 'gfRecordId', ids.value)
}

function handleExport() {
  proxy.download('system/gfRecord/export', { gfRecordIds: ids.value.join(','), ...queryParam.value, status: 5 }, `gfRecord_${new Date().getTime()}.xlsx`)
}

function handleSearch(params) {
  queryParam.value = params
  pagerConfig.value.currentPage = 1
  getList()
}

function handleEditRemark(row) {
  ElMessageBox.prompt('', '修改备注', {
    inputValue: row.remark,
    inputPattern: /^[\s\S]*$/,
    inputErrorMessage: '备注不能为空',
    inputType: 'textarea',
    inputPlaceholder: '请输入备注',
  }).then(({ value }) => {
    const params = {
      ...row,
      remark: value,
    }
    gfRecordService.edit(params).then(() => {
      Message.success('修改备注成功')
      getList()
    })
  })
}
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="">
      <SearchBar :search-config="searchConfig" @search="handleSearch" />
    </el-card>
    <el-card shadow="never" class="mt-2">
      <Toolbar>
        <el-button
          v-hasPermi="['system:gfRecord:export']"
          type="warning"
          class="el-gradient-warning"
          @click="handleExport()"
        >
          导出
          <el-icon class="el-icon--right">
            <FolderAdd />
          </el-icon>
        </el-button>
      </Toolbar>
      <vxe-grid
        :row-config="{
          keyField: 'gfRecordId',
        }"
        :data="tableData"
        :columns="tableColumn"
        :pager-config="pagerConfig"
        header-cell-class-name="headerCellClass"
        @page-change="handlePageChange"
        @checkbox-all="handleCheckChange"
        @checkbox-change="handleCheckChange"
        max-height="560px"
      >
        <template #jfNode="{ row }">
          <dict-tag :options="jf_node" :value="row.jfNode" />
        </template>
        <template #status="{ row }">
          <dict-tag :options="gf_record_status" :value="row.status" />
        </template>
        <template #actions="{ row }">
          <el-button
            v-hasPermi="['system:gfRecord:edit']" text type="success" size="small"
            @click="handleEditRemark(row)"
          >
            修改备注
          </el-button>
        </template>
      </vxe-grid>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>

</style>
